<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >

    <!-- 开票单位 -->
    <el-form-item label="开票单位：" prop="invoicingUnit">
      <el-input v-model="ruleForm.invoicingUnit" />
    </el-form-item>
    <!-- 发票类型 -->
    <el-form-item label=" 发票类型：" prop="invoiceType">
       <el-radio-group v-model="ruleForm.invoiceType">
        <el-radio :label="1">普通发票</el-radio>
        <el-radio :label="2">增值税发票</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 发票金额 -->
    <el-form-item label="发票金额：" prop="invoiceMoney">
      <el-input v-model="ruleForm.invoiceMoney" />
    </el-form-item>
    <!-- 税  率 -->
    <el-form-item label="税  率：" prop="invoiceRate">
      <el-input v-model="ruleForm.invoiceRate" />
    </el-form-item>
    <!-- 税  额 -->
    <el-form-item label="税  额：" prop="invoiceTax">
      <!-- <el-input v-model="ruleForm.invoiceTax" /> -->
       <!-- 税额：根据上面的输入发票金额和税率值自动计算发票金额*税率，且输入框不能输入任何值 -->
         <el-input v-model="invoiceTax" disabled/>
    </el-form-item>
    <!-- 开票日期 -->
    <el-form-item label="开票日期：" prop="invoiceDate">
          <el-date-picker
            v-model="ruleForm.invoiceDate"
            type="date"
            aria-label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
    </el-form-item>
    <!-- 备  注 -->
    <el-form-item label="备  注：" prop="invoiceRemark">
      <el-input v-model="ruleForm.invoiceRemark" />
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm()">
        修改
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted,computed } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import http from '@/Http';

// 定义计算属性
const invoiceTax = computed(() => {
  const invoiceMoney = parseFloat(ruleForm.invoiceMoney)
  const invoiceRate = parseFloat(ruleForm.invoiceRate)
  if (isNaN(invoiceMoney) || isNaN(invoiceRate)) {
    return 0
  }
  return (invoiceMoney * invoiceRate / 100).toFixed(2)
})

const route = useRoute();
const router = useRouter();
// 定义表单数据
const ruleForm = reactive({
  invoiceId: route.query.invoiceId,
    invoicingUnit:'',
    invoiceNumber: '',
    invoiceType:'',
    invoiceMoney: '',
    invoiceRate: '',
    invoiceTax: 0,
    invoiceDate: '',
    invoiceRemark: '',
    firmId: '',
    userId:'',
   createNames: "",
    createDates: "",
})
const getFindInvoice = () => {
    axios.get("Settlementwrite/api/Invoices/GetById", {
        params: {
            invoiceId: route.query.invoiceId
        }
    })
      .then(res => {
          ruleForm.invoiceId = res.data.data.invoiceId
            ruleForm.invoicingUnit = res.data.data.invoicingUnit
            ruleForm.invoiceNumber = res.data.data.invoiceNumber
            ruleForm.invoiceType = res.data.data.invoiceType
            ruleForm.invoiceMoney = res.data.data.invoiceMoney
            ruleForm.invoiceRate = res.data.data.invoiceRate
            ruleForm.invoiceTax = res.data.data.invoiceTax
            ruleForm.invoiceDate = res.data.data.invoiceDate
            ruleForm.invoiceRemark = res.data.data.invoiceRemark
            ruleForm.firmId = res.data.data.firmId
        ruleForm.userId = res.data.data.userId
            ruleForm.createNames = res.data.data.createNames
            ruleForm.createDates = res.data.data.createDates
   
    })
}

// 提交表单
const submitForm = async () => {
      axios.post("Settlementwrite/api/Invoices/UpdateAsyncs", ruleForm)
        .then(res => {
          if (res.data.data > 0) {
            ElMessage.success('修改成功')
            router.push('/OutputInvoicesList')
          } else {
            ElMessage.error('修改失败')
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(() => {
    getFindInvoice()
})

</script>
<style>
select {
    width: 200px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-ruleForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
    width: 100%;
}

.el-button {
    margin-right: 10px;
}
</style>